$(document).ready(function () {
    laydate.render({
        elem: '#year-one',
        type: 'year'
    });
    laydate.render({
        elem: '#year-two',
        type: 'year'
    });
    var main_chart = echarts.init(document.getElementById("main-content"));

    option = {
        title: {
            text: "电影评分显示",
            left: "center",
            top: "top"
        },
        animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的
        //图例
        tooltip: {
            trigger: "item",
            enterable: true,
            formatter: function (params) {
                var res = '<div><p>电影：' + params.name + '</p></div>'
                res += '<p>电影评分：' + params.data.value[1] + '</p>'
                return res;
            }
        },

        //网格
        grid: {
            show: true,//是否显示直角坐标系的网格,true显示，false不显示
            left: 100,//grid组件离容器左侧的距离
            containLabel: false//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。

        },

        //X轴
        xAxis: {
            name: '年份',//x轴的名称
            nameLocation: 'end',//x轴名称的显示位置'middle'，'end'
            nameRotate: 30,//坐标轴名字旋转角度值
            gridIndex: 0,//x轴所在的grid的索引，默认位于第一个grid
            //offset:10,//x轴相对默认位置的偏移，在一个grid中含有多个grid的时候有意义
            type: 'time',//数值轴适用于连续型数据
            //'category'类目轴 适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
            //'time' //时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
            //'log' 对数轴。适用于对数数据。
            // position: 'top',//x轴位于grid的上方还是下方，默认为bottom在下方
            inverse: false,//是否反向坐标
            boundaryGap: ['20%', '20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
            //类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
            //非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
            splitLine: {
                show: true
            }
        },

        //Y轴
        yAxis: {
            name: "评分",
            type: 'value',
            min: 0,
            max: 10,
            splitLine: {
                show: true
            }
        },

        //数据区域缩放、滚动条
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0]
            }
        ],

        //visualMap
        visualMap: {
            range: [0, 800000],//指定手柄对应数值的位置
            calculable: true,//表示是否设置了拖拽用的手柄，如果为false则拖拽结束时，才更新视图。如果为ture则拖拽手柄过程中实时更新图表视图。
            realtime: false,//表示拖拽时是否实时更新
            type: 'piecewise',//表示分段型视觉映射组件（visualMapPiecewise）
            splitNumber: 10,//对于连续型数据，自动切分成几段默认是5段
            pieces: [//每一段的范围，以及每一段的文字，以及每一段的特别的样式
                {min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
                {min: 900, max: 1500},
                {min: 310, max: 1000},
                {min: 200, max: 300},
                {min: 10, max: 200, label: '10 到 200（自定义label）'},
                {value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
                {max: 5}     // 不指定 min，表示 min 为无限大（-Infinity）。
            ],
            min: 2,//指定 visualMapPiecewise 组件的最小值。
            max: 5,//指定 visualMapPiecewise 组件的最大值。
            selectedMode: 'multiple',//(多选)(单选)
            inverse: false,//是否反转
            precision: 2,//数据展示的小数精度
            itemWidth: 20,//图形的宽度，即每个小块的宽度。
            itemHeight: 20,//图形的高度，即每个小块的高度
            text: ['High', 'Low'],//两端的文本
            align: 'auto',// 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
            textGap: 20,//两端文字主体之间的距离
            itemGap: 10,//每两个图元之间的间隔距离，单位为px。
            itemSymbol: 'circle',//图形的形状 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            show: true,//是否显示组件
            dimension: 0,//指定用数据的『哪个维度』，映射到视觉元素上。
            seriesIndex: 0,//指定取哪个系列的数据，即哪个系列的 series.data。
            hoverLink: true//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
        },
        //装载数据
        series: [
            {
                name: 'movie',
                type: 'scatter',
                itemStyle: {
                    normal: {
                        opacity: 0.8
                    }
                },
                symbolSize: 15
            }
        ]
    };
    main_chart.setOption(option);
    // FIXME: 用一个函数去重构
    $("#sort-score").click(function () {
        var year_start = $("#year-one").val();
        var year_end = $("#year-two").val();
        var sort_state = $(this).attr("data-status");
        var sort_way = 0;
        if (!(YearVerify(year_start, year_end))) {
            $(".alert-warning").css("style", "display:block");
            alert('year');
            return false
        }
        if (sort_state === "1") {
            return false
        }
        alert('rating');
        $("sort-comment").attr("data-status", "0");
        $.ajax({
            type: "GET",
            url: "/post/chart/index/",
            dataType: "json",
            data: {
                'year_start': year_start, "year_end": year_end,
                'sort_way': sort_way
            },
            success: function (data) {
                main_chart.setOption({
                    xAxis: {
                        name: "年份",
                        type: "time",
                        min: new Date(year_start),
                        max: new Date(year_end)
                    },
                    series: [
                        {
                            name: 'movie',
                            data: pushMovie(data)
                        }
                    ]
                })
            },
            error: function () {
                alert('error');
                main_chart.hideLoading();
            }
        })
    });
    // $("#sort-comment").click(function () {
    //     var year_start = $("#year-one").val();
    //     var year_end = $("#year-two").val();
    //     var sort_state = $(this).attr("data-status");
    //     var sort_way = 1;
    //     if (!(YearVerify(year_start, year_end))) {
    //         $(".alert-warning").css("style", "display:block");
    //         alert('comment');
    //         return false
    //     }
    //     if (sort_state === "1") {
    //         return false
    //     }
    //     // todo:检测变换年份，没变换不发ajax请求
    //     alert('here');
    //     $("sort-score").attr("data-status", "0");
    //     $.ajax({
    //         type: "GET",
    //         url: "/post/chart/index/",
    //         dataType: "json",
    //         data: {
    //             'year_start': year_start, "year_end": year_end,
    //             'sort_way': sort_way
    //         },
    //         success: function (data) {
    //             main_chart.setOption({
    //                 yAxis: {
    //                     name: "评论人数",
    //                     type: "value",
    //                     min: function (value) {
    //                         return value.min - 10;
    //                     },
    //                     max: function (value) {
    //                         return value.max + 10;
    //                     }
    //                 },
    //                 xAxis: {
    //                     name: "年份",
    //                     type: "time",
    //                     min: new Date(year_start),
    //                     max: new Date(year_end)
    //                 },
    //                 series: [
    //                     {
    //                         name: 'movie',
    //                         data: pushMovie(data)
    //                     }
    //                 ]
    //             })
    //         },
    //         error: function () {
    //             alert('error')
    //         }
    //     });
    //     $("#sort-comment").attr("data-status", "1")
    // });
    main_chart.on("click", function (params) {
        console.log(params);
        window.open('/movie_info/' + params.data.id)
    })
});

function pushMovie(data) {
    var datas = [];
    $.each(data, function (index, value) {
        console.log('hello', value.comments_count);
        var field = [];
        field.push(value.fields.year);
        field.push(value.fields.rating);
        datas.push({name: value.fields.title, value: field, id: value.pk});
    });
    return datas
}

function YearVerify(year_begin, year_end) {
    return !!(year_begin && year_end);
}